<template>
  <div>
    {{ refNum }},
    {{ refObj.count }}
    {{ reactObj.count }}
    <button @click="increase">add</button>
  </div>
</template>

<script >
import { ref, reactive } from 'vue'

export default {
  setup() {
    const refNum = ref(1)

    const refObj = ref({
      count: 0
    })

    const reactObj = reactive({
      count: 0
    })
    console.log(refNum, refObj, reactObj)

    const increase = () => {
      refNum.value++
      refObj.value.count++, reactObj.count++
    }
    return {
      refNum,
      refObj,
      reactObj,
      increase
    }
  }
}
</script>

<style>
</style>